<template>
    <div class="dhzn_inexpress">
        <!-- 物流 -->
        <div class="d_ie-query">
            <el-form :model="queryexp" label-width="80px">
                <el-form-item label="快递单号">
                    <el-col :span='4'>
                        <el-form-item label="">
                            <el-select v-model="queryexp.select">
                                <el-option label="韵达" value="0"></el-option>
                                <el-option label="中通" value="1"></el-option>
                                <el-option label="申通" value="2"></el-option>
                                <el-option label="顺丰" value="3"></el-option>
                                <el-option label="圆通" value="4"></el-option>
                                <el-option label="京东" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9"><el-input v-model="queryexp.value" placeholder="快递单号查询"></el-input></el-col>
                    <el-col :span="5" class="pl10"><el-button type="primary" @click="query">查询</el-button></el-col>
                </el-form-item>
            </el-form>
        </div>

        <div class="d_ie-content mt20 bcwh">
            <div v-if="express">
                快递单号： {{express.number}}
                <br>
                快递公司： {{express.typename}}
                <br>
                快递图片： <img :src="express.logo" alt="">
                <br>
                快递状态： {{express.deliverystatus | filterdeliver}}
                <br>
                <span v-for="(item,key) in express.list" :key="key">
                    时间：{{item.time}}<br>
                    目的地： {{item.status}}
                </span>
            </div>
        </div>
    </div>
</template>

<script>
let axios = require('axios')
export default {
    components: {},
    data() {
        return {
            token: '',
            express: '',
            queryexp: {
                select: '',
                value: ''
            }
        };
    },
    filters:{
        filterdeliver(state){
            if(state === 1){
                state = "在途中"
            }else if(state === 2){
                state = "派送中"
            }else if(state === 3){
                state = "已签收"
            }else if(state === 4){
                state = "已拒收"
            }else{return}
            return state
        }
    },
    computed: {},
    watch: {},
    methods: {
        // 订单商品的快递
        requestexpress(){
            let that = this;
        },

        query(){
            let that = this;
            let data = {number:that.queryexp.value,type:'auto'};
            // let updata = JSON.stringify(data);

            axios({
                method: 'post',
                url: '/api/express/query',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: data
            }).then( resp=> {
                console.log(resp)
                if(resp.data.data === "出错了"){
                    // console.log('严重通过')
                    this.$message.error('快递单号错误，请核对后再查询')
                }
                that.express = resp.data.data.result;
            }).catch( err=> {console.log(err)})
        }
    },
    created() {
        let that = this;
        that.token = JSON.parse(sessionStorage.getItem('token'))
    },
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.d_ie-content{
    height: 600px;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
}
</style>